<template>
  <div class="index">
    <Head title="订单详情"/>
    <div class="container">
      <!-- 店铺信息 -->
      <div class="shop_ban">
        <div class="shop_bg">
          <img src="/static/image/detail_bg.png" alt>
        </div>
        <div class="shop_message">
          <div class="shop_message_box flex-box ccolor">
            <div class="shop_message_box_center">
              <div class="shop_message_box_left_top">
                <span>{{order_result.order_state_name}}</span>
                <!--<span>等待卖家付款</span>-->
              </div>
              <div
                class="shop_message_box_left_bot"
                v-if="order_result.order_state==10||order_result.order_state==9"
              >
                <span id>退款结束时间</span> &nbsp;
                <span>{{order_result.order_edit_time}}</span>
              </div>
              <div class="shop_message_box_left_bot" v-else>
                <span id>最后操作时间</span> &nbsp;
                <span>{{order_result.order_edit_time}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 店铺信息 end -->
      <Address :order_address_info="order_address_info"/>

      <!-- 功能列表 -->
      <ShopList :status="status" :dataList="goods_list"/>
      <!-- 退款 -->
      <div class="countOrder" v-if="order_result.order_state==10||order_result.order_state==9">
        <div>
          <span>货物状态：</span>
          <span>{{refund_info.goods_state}}</span>
        </div>
        <div>
          <span>退款原因:</span>
          <span>{{refund_info.refund_reason}}</span>
        </div>
        <div>
          <span>退款说明:</span>
          <span>{{refund_info.refund_explain}}</span>
        </div>
        <div>
          <span>退款编号:</span>
          <span>{{refund_info.refund_sn}}</span>
        </div>
        <div>
          <b>退款金额:</b>
          <span id="priceAll">￥{{refund_info.refund_amount}} (含运费)</span>
        </div>
        <div id class="consutor">
          <div class="btn">
            <div class="padFlex">
              <img src="/static/image/detail_2.png">
              <div>联系卖家</div>
            </div>
          </div>
          <div class="btn">
            <div class="padFlex">
              <img src="/static/image/detail_3.png">
              <div></div>
              <div>拨打电话</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 退款 end-->
      <!-- 统计-->
      <div class="countOrder" v-else>
        <div>
          <span>商品总额：</span>
          <span>￥{{order_result.goods_amount}}</span>
        </div>
        <div>
          <span>店铺优惠:</span>
          <span>-￥{{order_result.order_discount}}</span>
        </div>
        <div>
          <span>运费:</span>
          <span>￥{{order_result.order_freight}}</span>
        </div>
        <div>
          <b>实付款:</b>
          <span id="priceAll">￥{{order_result.order_amount}}</span>
        </div>
        <!---->
        <div id class="consutor">
          <div class="btn">
            <div class="padFlex">
              <img src="/static/image/detail_2.png">
              <div>联系买家</div>
            </div>
          </div>
          <div class="btn">
            <div class="padFlex">
              <img src="/static/image/detail_3.png">
              <div>
                <a :href="'tel:'+order_address_info.mobile">拨打电话</a>
              </div>
            </div>
          </div>
        </div>
        <!---->
      </div>
      <div class="xs_log" v-if="order_result.order_state==10||order_result.order_state==9">
        <div class="xs_log_head">协商历史</div>
        <div class="log_con" v-for="(item,index) in RefundConsultList">
          <div class="log_con_head">
            <div class="log_con_head_left">
              <img :src="item.member_info.avatar" alt>
            </div>
            <div class="log_con_head_right">
              <div class="log_con_head_right_box">
                <div class="log_con_head_name">{{item.member_info.nickname}}</div>
                <div class="log_con_head_time">{{item.refund_consult_time}}</div>
              </div>
            </div>
          </div>
          <div class="log_message">{{item.refund_consult_name}}</div>
          <div
            class="log_message"
            v-if="item.refund_consult_value!=''"
          >{{item.refund_consult_value.express_company}}/运单号：{{item.refund_consult_value.express_no}}</div>
        </div>
      </div>
      <div class="bottom_Order" v-else>
        <div>
          <b>订单编号：</b>
          <span>{{order_result.order_sn}}</span>
        </div>
        <div>
          <b>订单备注：</b>
          <span>{{order_result.order_desc}}</span>
        </div>
      </div>
      <!-- <div class="bottom_fp" v-if="status!=3&&status!=4">
        <div>
          <b>发票类型：</b>
          <span>未开发票</span>
        </div>
      </div>-->
      <div id="footbtn" v-if="order_result.order_state==2">
        <div @click="lfBtn()" class="fixbutn">联系买家</div>
        <div @click="edit_order_state(3)" class="fixbutn">接单</div>
      </div>
      <div id="footbtn" v-else-if="order_result.order_state==4">
        <div @click="toLogistical" class="fixbutn">查看物流</div>
        <div @click="rigBtn()" class="fixbutn">联系买家</div>
      </div>
      <!-- <div id="footbtn" v-else-if="status==3">
        <div @click="lfBtn()" class="fixbutn">同意退货</div>
      </div>-->
      <div
        id="footbtn"
        v-else-if="order_result.order_state==7||order_result.order_state==8||order_result.order_state==10"
      >
        <div @click="lfBtn()" class="fixbutn">删除订单</div>
      </div>
      <div id="footbtn" v-else-if="order_result.order_state==3">
        <div @click="lfBtn()" class="fixbutn">联系买家</div>
        <div @click="send_goods()" class="fixbutn">发货</div>
      </div>

      <div id="footbtn" v-if="order_result.order_state==9&&refund_info.refund_state_id==1">
        <div @click="editRefundState(2)" class="fixbutn">同意退货</div>
      </div>
      <div id="footbtn" v-else-if="order_result.order_state==9&&(refund_info.refund_state_id==3||refund_info.refund_state_id==2)">
        <div @click="editRefundState(4)" class="fixbutn">同意退款</div>
      </div>
    </div>
  </div>
</template>

<script>
import Head from "@/components/_head";
import Address from "@/components/order/Address";
import ShopList from "@/components/order/orderDetails";

export default {
  data() {
    return {
      status: 0,
      orTime: "2018-02-20 12:00",

      goods_list: [],
      order_result: {},
      order_address_info: {},
      refund_info: {},
      RefundConsultList: []
    };
  },
  mounted() {
    this.get_order_info();
  },
  methods: {
    // 获取订单详情
    get_order_info() {
      this.appJS.ajax(
        "user.get_order_info",
        "post",
        {
          order_id: this.$route.query.order_id
        },
        res => {
          if (res.recode == 1) {
            if (
              res.data.result.order_state == 9 ||
              res.data.result.order_state == 10
            ) {
              this.getRefundInfo();
            }
            this.order_result = res.data.result;
            this.goods_list = this.order_result.goods_list;
            this.order_address_info = this.order_result.order_address_info;
          }
        },this
      );
    },
    // 获取退款信息
    getRefundInfo() {
      this.appJS.ajax(
        "user.getRefundInfo",
        "post",
        {
          order_id: this.$route.query.order_id
        },
        res => {
          if (res.recode == 1) {
            this.refund_info = res.data.refund_info;
            this.getRefundConsultList();
          }
        }
      );
    },
    // 获取协商列表
    getRefundConsultList() {
      this.appJS.ajax(
        "user.getRefundConsultList",
        "post",
        {
          refund_id: this.refund_info.refund_id
        },
        res => {
          if (res.recode == 1) {
            this.RefundConsultList = res.data.refund_consult_list;
          }
        }
      );
    },
    //  修改退款状态
    editRefundState(refund_state_id) {
      //refund_state_id=> 2、卖家同意退货 4、退款成功a
      this.appJS.ajax(
        "user.editRefundState",
        "post",
        {
          uid: this.appJS.getStorage('userInfo').uid,
          refund_id: this.refund_info.refund_id,
          refund_state_id:refund_state_id
        },
        res => {
          if (res.recode == 1) {
            this.$toast("操作成功");
            this.get_order_info();
          }
        }
      );
    },
    edit_order_state(order_state_id) {
      //同意接单：3 同意退款：10=>这里的退款操作没用了
      this.appJS.ajax(
        "user.edit_order_state",
        "post",
        {
          order_id: this.$route.query.order_id,
          order_state_id: order_state_id
        },
        res => {
          if (res.recode == 1) {
            this.$toast("操作成功");
            this.get_order_info();
          }
        }
      );
    },
    lfBtn() {
      this.$toast("联系买家");
    },
    rigBtn() {
      //event.target.innerHTML=''
      if (this.status == 1) {
        this.$router.push("/logistical");
      }
    },
    // 发货
    send_goods() {
      this.$router.push({
        path: "/Sendgoods",
        query: { order_id: this.$route.query.order_id }
      });
    },
    // 查看物流
    toLogistical() {
      this.$router.push({ path: "/logistical" ,query:{order_id:this.order_result.order_id}});
    }
  },
  components: {
    Head,
    ShopList,
    Address
  }
};
</script>

<style scoped="" lang='less'>
.index {
  min-height: 100vh;
  padding-bottom: calc(15vw + 0.6rem);
  background: #fff;
}
.shop_ban {
  height: 33.3333vw;
  width: 100%;
  position: relative;
  .shop_bg {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
  }
  .shop_message {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    .shop_message_box {
      height: 20vw;
      width: 100%;
      padding: 0 0.5rem;
      color: #fff;
      font-size: 3vw;
      display: flex;
      justify-content: center;
      align-items: center;
      padding-left: 1rem;
      .shop_message_box_center {
        width: calc(100% - 1rem);
        .shop_message_box_left_top {
          font-size: 1.3rem;
          font-weight: bold;
          display: flex;
          align-items: center;
          justify-content: center;
          .check {
            padding: 0.1rem 0.4rem;
            border: 1px solid #efefef;
            border-radius: 100px;
            .fontSize(0.5rem);
          }
        }
        .shop_message_box_left_bot {
          font-size: 0.9rem;
          margin-top: 0.2rem;
          .flex-box(center, center, 0.2rem);
          span {
            font-size: 3vw;
            font-weight: 500;
            :last-child {
              margin-left: 0.3rem;
            }
          }
        }
      }
      .line {
        width: 1px;
        height: 50%;
        background: #fff;
      }
      .shop_message_box_right {
        height: 100%;
        width: 50%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .shop_message_box_right_list {
          height: 80%;
          width: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-wrap: wrap;
          font-size: 3.5vw;
          .shop_message_box_right_top {
          }
        }
      }
    }
  }
}

.shop {
  height: 2rem;
  width: 100%;
  position: relative;
  background: #fff;
  .shop_box {
    position: absolute;
    left: 0;
    padding: 0 0.6rem;
    top: -1.5rem;
    height: 3rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding-left: 1rem;
    .shop_box_left {
      height: 100%;
      width: 3rem;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      img {
        height: 2.5rem;
        width: 2.5rem;
        border-radius: 100%;
      }
    }
    .shop_box_right {
      height: 100%;
      width: calc(100% - 3rem);
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      color: #fff;
      font-size: 0.9rem;
      flex-wrap: wrap;
      .shop_box_right_top {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 50%;
        img {
          height: 1rem;
          width: 1rem;
          margin-left: 0.2rem;
        }
      }
      .shop_box_right_bot {
        height: 50%;
        width: 100%;
        .flex-box(center, center, 0.2rem);
        color: #888;
        font-size: 0.6rem;
      }
    }
  }
}
.bottom_lev {
  height: 3rem;
  width: 100%;
  /* position: absolute;*/
  bottom: 0;
  left: 0;
  font-size: 0.7rem;
  color: #10aaff;
  display: flex;
  justify-content: center;
  align-items: center;
  .bottom_lev_box {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  img {
    height: 1rem;
    width: 1rem;
  }
}

.countOrder {
  padding: 0.5rem;
  color: #333;
  font-size: 0.7rem;
  border-bottom: 0.5rem solid #efefef;
  .consutor {
    .flex-box(space-between, center, 0.5rem 0 0 0);
  }
  > div {
    margin-bottom: 0.2rem;
    min-height: 5.5vw;
  }
  span {
    color: #888888;
  }
  #priceAll {
    color: #ec4f46;
    font-size: 0.9rem;
  }
  .btn {
    .flex-box(center, center, 2.3vw);
    flex: 1;
    -webkit-flex: 1;

    .padFlex {
      .flex-box(center, center, 2.3vw);
      .flex(1);
      &:active {
        background: #efefef;
      }
      min-height: 11vw;
      border-radius: 5vw;
      border: 1px solid #ddd;
      a {
        color: #000 !important;
      }
      &:first-child {
        /*margin-right:2.2rem;*/
      }
    }
    img {
      height: 3vh;
      width: auto;
      margin-right: 0.3rem;
    }
  }
}
#footbtn {
  height: 15vw;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  box-shadow: 1px 1px 5px #ccc;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #fff;
  z-index: 9999;
  .fixbutn {
    height: 10vw;
    width: 33vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
    border-radius: 100px;
    margin-right: 1rem;
    &:nth-child(1) {
      border: 1px solid #bfbebe;
      color: #888;
    }
    &:nth-child(2) {
      border: 1px solid @actColor;
      color: @actColor;
    }
  }
}

.bottom_Order {
  .countOrder;
  padding: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #efefef;
}
.bottom_fp {
  .countOrder;
  padding: 0.5rem 1rem;
  border: 0;
}
.xs_log {
  background: #fff;
  padding: 0 1rem;
  .xs_log_head {
    height: 3rem;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 0.9rem;
    font-weight: bold;
    border-bottom: 1px solid #efefef;
  }
  .log_con {
    padding: 0.5rem 0;
    border-bottom: 1px solid #efefef;
    &:last-child {
      border: 0;
    }
    .log_con_head {
      height: 3.5rem;
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .log_con_head_left {
        width: 3.2rem;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        img {
          height: 2.5rem;
          width: 2.5rem;
          border-radius: 100px;
        }
      }
      .log_con_head_right {
        width: calc(100% - 3.2rem);
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 0.6rem;
        color: #888;
        .log_con_head_name {
          color: #000;
          font-size: 0.9rem;
        }
      }
    }
  }
  .log_message {
    font-size: 0.8rem;
  }
}
</style>

